<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选主页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iocn/iconfont.css">
</head>


<body>
    <main>
        <div class="box-top">
            <!--顶部大盒子-->
            <img src="./image/logo.png" class="logo">
            <img src="./image/logo-1.png" class="logo-1">
            <form action="" class="parent">
                <span class="iconfont icon-fangdajing"></span>
                <input type="text" class="search" placeholder="搜索商品发现更多优惠">
                <input type="button" name="" id="" class="btn" value="搜索">
            </form>
            <!--搜索框-->
            <i class="iconfont icon-tianmaobaoyouqia" herf="#">
                <p>全国包邮</p>
            </i>

            <span class="iconfont icon-tuikuan">
                <p>7天退款</p>
            </span>
            <span class="iconfont icon-pinzhibaozhengQuality">
                <p>品质保证</p>
            </span>
        </div>
        <!--主页面--->
        <div class="box-center">
            <div class="bar">
                <!--导航栏-->
                <ul>
                    <li class="click">首页</li>
                    <li onclick="jiukuaijiu()">9块9包邮</li>
                    <li>超值大额劵</li>
                    <li>降温求救穿搭</li>
                </ul>

            </div>
            <!--主页面显示-->
            <div class="page">
                <!-- 竖着的导航栏 -->
                <ul>
                    <li> <span class="iconfont icon-nvzhuang">&nbsp&nbsp&nbsp</span><a href="#">女装</a>/<a
                            href="#">女鞋</a> </li>
                    <li><i class="iconfont icon-pixie">&nbsp&nbsp&nbsp<a href="#">男装/</a><a href="#">男鞋</a></i></li>
                    <li> <i class="iconfont icon-kouhong">&nbsp&nbsp&nbsp<a href="#">美妆/</a><a href="#">个护</a></i></li>
                    <li> <i class="iconfont icon-baobao">&nbsp&nbsp&nbsp<a href="#">配饰/</a><a href="#">箱包</a></i></li>
                    <li> <i class="iconfont icon-tianmaochaoshilingshi">&nbsp&nbsp&nbsp<a href="#">零食王国</a></i></li>
                    <li><i class="iconfont icon-muyingchanpin">&nbsp&nbsp&nbsp<a href="#">母婴用品</a></i></li>
                    <li><i class="iconfont icon-shouji">&nbsp&nbsp&nbsp<a href="#">手机/</a><a href="#">数码</a></i></li>
                    <li> <i class="iconfont icon-neiyi">&nbsp&nbsp&nbsp<a href="#">内衣/</a><a href="#">袜子</a></i></li>
                    <li> <i class="iconfont icon-jiaju  ">&nbsp&nbsp&nbsp<a href="#">文娱/</a><a href="#">家居</a></i></li>
                </ul>
                <div class="page-1">
                    <!-- 轮播区域 -->
                    <div class="container" id="swiper1">
                        <!-- 相框 -->
                        <div class="swiper-wraper">
                            <ul class="swiper" style="left: -660px;">
                                <li><img src="./image/chuanda2.png" alt=""></li>
                                <li><img src="./image/lunbo1.jpeg" alt=""></li>

                            </ul>

                            <a href="#" class="next">&gt;</a>
                            <a href="#" class="prev">&lt;</a>
                            <!-- 指示器 -->
                            <ol></ol>
                        </div>
                    </div>

                    <img src="./image/baoyou.jpg" alt="" class="jiukuai">
                    <img src="./image/chuanda.png" alt="" class='baoyou'>
                    <img src="./image/zhekoujuan.png" alt="" class='zhekoujuan'>
                    <img src="./image/saoma.jpg" alt="" class='saoma'>
                </div>
            </div>
        </div>
        <!--中间部分的商品标  -->
        <div class="page-center">
            <div class="wrdes">
                <h3>小编精选</h3>
                <p>每天更新</p>
            </div>

            <!--商品展示页面-->
            <ul class="mini-box">
                <script type="text/html" id="product-list-temp">
                    {{each productList}}
                <li class="lis" onclick="onProductDet({{$value.id}})">
                    <img class="commodity-card-img" src="{{$value.image}}">
                       <div class="mini-box-1">
                        <p>{{$value.title}}</p>
                        <span class="tm">天猫</span>
                        <span class="baoyou">包邮</span>
                        <DIV class="mini-box-2">
                            <div class="mini-box-3">
                                <span>￥{{$value.price}}</span>
                                <!-- <span>9</span> -->
                                <!-- <span>.9</span> -->
                            </div>
                            <span class="yigoumai">{{$value.saleNum}}人已购买</span>
                            <div class="shiyuan">10元劵</div>
                        </DIV>

                    </div>

                </li>
                {{/each}}
            </script>
            </ul>
            <div class="btt-a">
                <button class="btna">查看更多</button>
                <div class="box-button">
                    <img src="./image/9931cd12202858a62e1de6741e1f0f7.png" class="box-button-img">
                    <h1>熊猫优选</h1>
                    <p>年轻人网购首选<br>领劵购物更省钱 </p>
                    <span>|下载app</span>
                    <img data-v-ec21f5b0="" src="htt://img1.lukou.com/static/img/activity/policeIcon.png"
                        class="police-icon">
                    <p>浙公安网备案33010602009949号|ICP备案号:浙ICP备17012864号-1| </p>
                    <img data-v-ec21f5b0="" src="htt://img1.lukou.com/static/img/activity/license.png"
                        class="police-icon">
                    <p>证照信息</p>
                </div>
                <img src="//static.anquan.org/static/outer/image/aqkx_83x30.png?id=www.xiongmaoyouxuan.com?t=48"
                    alt="安全联盟认证" style="border: none;" width="83" height="30" class="bottom-1">

            </div>
        </div>




    </main>





    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/index.js"></script>
    <script>
        const swiper = new Swiper('#swiper1')
        swiper.autoPlay(true)
    </script>
</body>

</html>